<template>
  <div class="pr-24 py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="卡片标题" class="mb-24">
      <el-input v-model="config.title" maxlength="99"></el-input>
    </el-form-item>
    <div class="card-setting mb-24 pl-24">
      <div class="d-flex al-start mb-16">
        <el-radio-group v-model="model.data.activeIndex" class="d-flex pb-4" style="overflow: auto">
          <el-radio-button
            v-for="(item, i) in config.groupList"
            :key="item.name + i"
            :data-key="item.name + i"
            :label="i"
            @mouseup.stop
          >
            <div v-show="!isEditItem || model.data.activeIndex !== i" @mouseup.stop="toEditItem(i)">
              {{ item.name }}
              <i
                v-show="config.groupList.length > 1"
                class="el-icon-error"
                style="cursor: pointer"
                @mouseup.self.stop="delItem(i)"
              ></i>
            </div>
            <div v-show="isEditItem && model.data.activeIndex == i" @mouseup.stop>
              <el-input v-model="editName" class="video-group-name-input" size="mini"></el-input>
            </div>
          </el-radio-button>
        </el-radio-group>
        <el-button class="ml-8 fw-bold t-theme pointer" type="text" @click="pushItem"
          ><SvgIcon icon-class="add"
        /></el-button>
      </div>
      <div class="card-box">
        <div v-for="(item, i) in activeList" :key="i" class="card p-24 bgc-white">
          <div class="card-title d-flex jc-between al-center mb-16 pb-16">
            <span>视频{{ i + 1 }}</span>
            <div>
              <SvgIcon
                v-show="activeList.length < 4"
                icon-class="add"
                class="icon-add pointer"
                @click="addCard(i + 1)"
              />
              <SvgIcon
                v-show="activeList.length > 1"
                icon-class="delete"
                class="icon-delete ml-12 pointer"
                @click="delCard(i)"
              />
            </div>
          </div>
          <div class="d-flex mb-24">
            <div class="label t-light">标题</div>
            <el-input v-model="activeList[i].title" maxlength="12"></el-input>
          </div>
          <div class="d-flex mb-24">
            <div class="label t-light">视频</div>
            <VideoMaterialSelector
              :video-url.sync="activeList[i].videoUrl"
              :cover-url.sync="activeList[i].coverUrl"
              :height="82"
            />
          </div>
          <div class="d-flex mb-24">
            <div class="label t-light">视频封面</div>
            <PictureMaterialSelector :img-url.sync="activeList[i].imgSrc" :height="82">
              <template #tip>
                <div class="mb-6">尺寸为150*102</div>
                <div>大小不超过2M</div>
              </template>
            </PictureMaterialSelector>
          </div>
          <JumpSetting v-model="config" />
        </div>
      </div>
    </div>
    <BorderSetting v-model="model" />
  </div>
</template>

<script>
  import PictureMaterialSelector from '@/components/PictureMaterialSelector';
  import VideoMaterialSelector from '@/components/VideoMaterialSelector';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';

  export default {
    components: {
      PictureMaterialSelector,
      VideoMaterialSelector,
      BorderSetting,
      JumpSetting
    },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        isEditItem: false,
        editName: ''
      };
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      },
      activeIndex() {
        return this.model.data.activeIndex;
      },
      activeList() {
        return this.config.groupList[this.activeIndex].list;
      }
    },

    mounted() {
      document.addEventListener('mouseup', this.cancelEdit);
    },

    beforeDestroy() {
      document.removeEventListener('mouseup', this.cancelEdit);
    },

    methods: {
      pushItem() {
        this.config.groupList.push({
          name: '未命名',
          list: [0, 1, 2, 3].map(() => ({
            title: '请输入标题',
            jump: false,
            url: '',
            videoUrl: '',
            coverUrl: '',
            imgSrc: '/admin/images/marketing/landingPage/widgets/poster-video.png'
          }))
        });
      },

      delItem(i) {
        this.config.groupList.splice(i, 1);
        if (!this.config.groupList[this.activeIndex]) this.model.data.activeIndex -= 1;
      },

      addCard(i) {
        this.config.groupList[this.activeIndex].list.splice(i, 0, {
          title: '请输入标题',
          jump: false,
          url: '',
          videoUrl: '',
          coverUrl: '',
          imgSrc: '/admin/images/marketing/landingPage/widgets/poster-video.png'
        });
      },

      delCard(i) {
        this.config.groupList[this.activeIndex].list.splice(i, 1);
      },

      toEditItem(i) {
        const activeIndex = this.model.data.activeIndex;
        this.isEditItem = false;
        if (this.isEditItem || i !== activeIndex) return;
        this.editName = this.config.groupList[activeIndex].name;
        this.isEditItem = true;
        this.$nextTick(() => document.querySelectorAll('.video-group-name-input')[activeIndex].focus());
      },

      cancelEdit() {
        if (!this.isEditItem) return;
        const activeIndex = this.model.data.activeIndex;
        this.config.groupList[activeIndex].name = this.editName;
        this.isEditItem = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .video-group-name-input {
    min-width: 72px;
  }

  .card-box {
    overflow-y: auto;
    margin-top: -1px;
    padding-right: 5px;
    max-height: 1000px;

    .card {
      &:not(:last-of-type) {
        margin-bottom: 16px;
      }

      .card-title {
        border-bottom: 1px solid map-get($bdColors, 'grey');
        line-height: 1;

        .icon-add:hover,
        .icon-delete:hover {
          color: map-get($colors, 'theme');
        }
      }

      .label {
        margin-right: 22px;
        width: 60px;
        text-align: right;
        color: map-get($colors, 'light');
      }

      ::v-deep .el-input {
        width: 277px;
      }
    }
  }

  ::v-deep {
    .el-radio__label {
      padding-left: 4px;
    }

    .el-radio-button__inner {
      padding: 8px 14px;
      font-size: 14px;

      .el-input {
        max-width: 75px;
        font-size: 14px;

        .el-input__inner {
          border: none;
          border-radius: 0;
          padding: 0;
          height: 14px;
          line-height: 1;
          text-align: center;
          color: #999;
        }
      }
    }

    .is-active .el-radio-button__inner {
      cursor: text;
    }
  }
</style>
